<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新时遇到的问题</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--
      
     -->
    <div id="app">
      <!-- 遍历数组 -->
      <div>
        <button @click="updateData">更新</button>

      </div>
      <ul>
        <li v-for="(stu,index) in list" ::key="stu.id">
            {{stu.Name}}--{{stu.Age}}--{{stu.Sex}}--{{stu.Address}}
        </li>
      </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list:[
                {id:1,Name:"马冬梅",Age:18,Sex:"男",Address:"北京"},
                {id:2,Name:"周冬雨",Age:19,Sex:"女",Address:"上海"},
                {id:3,Name:"周杰伦",Age:20,Sex:"男",Address:"广州"},
                {id:4,Name:"温兆伦",Age:21,Sex:"女",Address:"深圳"},
                {id:5,Name:"周炳伦",Age:22,Sex:"男",Address:"杭州"}
            ],
           
        },
        methods:{
            updateData(){
                //这里虽然替换了list中的数据但是Vue并没有监视到，可以用后面说的Vue.Set来尝试
                this.list[1] = {id:9,Name:"马老师",Age:50,Sex:"男",Address:"闪电五连鞭"}
            }
        }
    })
</script>
</html>